<template>
  <div class="containers">
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="handle-add mr10"
          size="mini"
          @click="addregion"
          >添加</el-button
        >

      </div>

      <el-table
        :data="tableData"
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
        v-loading="loading" :height="$tableHight" border size="mini">
      >
        <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="name" label="网点名称"></el-table-column>
        <el-table-column prop="mobile" label="联系电话"></el-table-column>
        <el-table-column prop="province" label="省"></el-table-column>
        <el-table-column prop="city" label="市"></el-table-column>
        <el-table-column prop="area" label="区"></el-table-column>
        <el-table-column prop="street" label="街道"></el-table-column>
        <el-table-column prop="detailed" label="详细地址"></el-table-column>
        <el-table-column label="是否默认" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.is_default ? 'success' : 'danger'">{{
              scope.row.is_default ? "是" : "否"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.is_use ? 'success' : 'danger'">{{
              scope.row.is_use ? "是" : "否"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
             size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button size="mini"
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑/添加弹出框 -->
    <el-dialog
      :title="type ? '编辑' : '添加'"
      :visible.sync="editVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="网点名称"
          ><el-input v-model="form.name"></el-input
        ></el-form-item>
        <el-form-item label="联系电话"
          ><el-input v-model="form.mobile"></el-input
        ></el-form-item>
        <el-form-item label="省市区街道">
          <SeleteAddress
            @addressChange="addressChange"
            :province="form.province"
            :city="form.city"
            :area="form.area"
            :street="form.street"
            :is-street="true"
          ></SeleteAddress>
        </el-form-item>
        <el-form-item label="详细地址"
          ><el-input v-model="form.detailed"></el-input
        ></el-form-item>
        <el-form-item label="是否默认">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="form.is_default"
          ></el-switch>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="form.is_use"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SeleteAddress from "@/components/address/address.vue";
export default {
  components: { SeleteAddress },
  data() {
    return {

      form: {
        province: "",
        city: "",
        area: "",
        street: "",
        detailed: "",
        is_default: 0,
        is_use: 0,
                latitude: 0,
                longitude: 0,
      },
      query: {
        pageIndex: 1,
        pageSize: 20,
      },
      upimg: {
        token: "",
        key: new Date().valueOf(),
      },
      upload: "",
      url: "",
      tableData: [],
      editVisible: false,
      pageTotal: 0,
      type: 0,
      loading: false,
    };
  },
  created() {
    this.getToken().then(
      (res) => {
        this.upimg.token = res.data.token;
        this.url = res.data.url;
        this.upload = res.data.upload;
      },
      function () {
        console.log("请求失败处理");
      }
    );
    this.getData();
  },
  methods: {
    addressChange(e) {
      console.log("addressChange", e);
      this.form.province = e[0];
      this.form.city = e[1];
      this.form.area = e[2];
      this.form.street = e[3];
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.form.img = this.url + res.key;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeupload(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("上传头像图片只能是 JPG、PNG 格式!");
        return false;
      }
      // if (file.size / 1024 / 1024 > 1) {
      // 	this.$message.error('上传图标大小不能超过 1M!');
      // 	return false;
      // }
      let types = file.name.split("."); //获取图片格式
      this.upimg.key =
        this.$template +
        "/home/" +
        new Date().valueOf() +
        "." +
        types[types.length - 1];
    },
    //获取数据
    getData() {
      this.loading = true;
      this.request("admin/network/", "get", {
        page: this.query.pageIndex,
        size: this.query.pageSize,
        code: this.code,
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.pageTotal = res.data.total;
        this.loading = false;
      });
    },
    // 编辑
    handleEdit(e) {
      this.editVisible = true;
      this.form = e;
      this.type = 1;
    },
    cancel() {
      this.editVisible = false;
      this.form = {
        province: "",
        city: "",
        area: "",
        street: "",
        detailed: "",
        is_default: 0,
        is_use: 0,
                latitude: 0,
                longitude: 0,
      };
      this.getData();
    },

    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        this.request("admin/network/", "delete", { id: row.ID }).then((res) => {
          if (res.errno == 0) {
            this.$message.success(res.errmsg);
            this.tableData.splice(index, 1);
            this.getData();
          } else {
            this.$message.error(res.errmsg);
          }
        });
      });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 添加
    addregion() {
      this.form = {
        province: "",
        city: "",
        area: "",
        street: "",
        detailed: "",
        is_default: 0,
        is_use: 0,
                latitude: 0,
                longitude: 0,
      };
      this.type = 0;
      this.imageUrl = "";
      this.editVisible = true;
    },

    // 添加/修改
    saveEdit() {
      let that = this;
      this.$address(
        this.form.province + this.form.city + this.form.area + this.form.address
      ).then((ress) => {
        if (ress.status == "1") {
          const address = ress.geocodes[0].location.split(",");
          console.log(address);
          that.form.latitude = Number(address[0]);
          that.form.longitude = Number(address[1]);
          this.request(
            "admin/network/",
            this.type ? "put" : "post",
            this.form
          ).then((res) => {
            if (res.errno == 0) {
              this.$message.success(res.errmsg);
              this.editVisible = false;
              this.getData();
              this.form = {
                province: "",
                city: "",
                area: "",
                street: "",
                detailed: "",
                is_default: 0,
                is_use: 0,
                latitude: 0,
                longitude: 0,
              };
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      });
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 200px;
  height: 60px;
  .el-image img {
    object-fit: cover;
  }
}
/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
</style>
